import React, { memo, useRef } from 'react'
import { Carousel } from 'antd'

import { AlbumWrapper } from './style'
import ThemeTitle from '@/components/theme-title'
import AlbumCover from '@/components/album-cover'

export default memo(function NewAlbum(props) {
  const { albums } = props

  const pageRef = useRef()

  return (
    <AlbumWrapper>
      <ThemeTitle title="新碟上架" isRecommend={true} url="/discover/toplist" />
      <div className="album-list">
        <Carousel dots={false} ref={pageRef}>
          {
            [0, 1, 2, 3].map((item, index) => {
              return (
                <div key={index} className="page">
                  {
                    albums.slice(item * 5, (item + 1) * 5).map(iten => {
                      return <AlbumCover key={iten.id}
                        info={iten}
                        size={100}
                        width={118}
                        bgp="-570px" />
                    })
                  }
                </div>
              )
            })
          }
        </Carousel>
        <div className="opt">
          <span className="btn prev" onClick={() => pageRef.current.prev()}>&lt;</span>
          <span className="btn next" onClick={() => pageRef.current.next()}>&gt;</span>
        </div>
      </div>
    </AlbumWrapper >
  )
})
